<template>
	<view class="buk-hotel-card" @click="_goToHotelDetails(hotel)">
		<view class="buk-hotel-card__image">
			<image src="https://p26.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/22f10850c5234b5285350743cfa16357"
				mode="aspectFill"></image>
		</view>
		<view class="buk-hotel-card__content">
			<view class="buk-hotel-card__content__title">
				<text class="font-bold">{{ hotel.hotelName }}</text>
				<!-- <ax-tag bgColor="#242424" is-flex text-color="#FADEAB" class="margin-left-xs p7">{{ hotel.hotelType }}</ax-tag> -->
			</view>
			<view class="flex align-center margin-tb-xs">
				<buk-rate-capsule text="^_^" :rate="` ` + hotel.rstar" />
				<!-- <text class="margin-left-xs font24 info-color">{{ hotel.rateCount }}点评</text> -->
			</view>

			<scroll-view scroll-x="true" class="buk-hotel-card__content__tag">
				<!-- <ax-tag class="ax-hotel-tag-ml" bgColor="#F9F6EE" text-color="#D59E32" key="0" >免费停车</ax-tag> -->
				<!-- <ax-tag class="ax-hotel-tag-ml" bgColor="#F9F6EE" text-color="#D59E32" key="1" >免费接送</ax-tag> -->
			</scroll-view>
			<text>
				<text class="font24 info-color two-lines-ellipsis">{{ hotel.address }}</text>
				<text class="font24 info-color"><!-- 距你{{ hotel.distance }}公里 --></text>
			</text>
			<view class="flex justify-end align-center margin-top">
				<text class="text-price font40 font-bold uni-warning">{{ hotel.lowestPrice }}</text>
				<text class="margin-left-xxs font24">起</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useHotelStore
	} from '@/store/hotel.js'

	const props = defineProps({
		hotel: {}
	});
	
	const hotelStore = useHotelStore()
	
	
	function _goToHotelDetails(hotel) {
		hotelStore.updateHotelInfo(hotel)
		uni.navigateTo({
			url: `/pages/hotel/HotelDetails`
		});
	}
	
</script>

<style lang="scss" scoped>
	.two-lines-ellipsis {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 显示两行文本 */
		-webkit-box-orient: vertical;
		/* 垂直排列 */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 超出两行显示省略号 */
		white-space: normal;
		/* 允许换行 */
	}


	.buk-hotel-card {
		display: flex;
		width: 100%;
    margin-top: 12rpx;
		margin-bottom: 12rpx;
    background-color: #edefff;
    opacity: 90%;

		&__image {
			width: 440rpx;
			overflow: hidden;
			display: flex;
			border-radius: 20rpx;
			background-color: #fff;
			margin-right: 24rpx;

			& image {
				width: 100%;
				height: 100%;
			}
		}

		&__content {
			display: flex;
			flex-direction: column;
      padding: 5rpx;

			&__title {
				display: flex;
				flex-wrap: wrap;
				font-size: 32rpx;
				font-weight: 400;
				align-items: center;
				color: #242424;
				line-height: 44rpx;
			}

			&__tag {
				white-space: nowrap;
				width: 440rpx;
				overflow: hidden;
			}
		}
	}
</style>